<!--金蝶对接-辅助账客户映射-->
<template>
    <div class="customerMapping">
        <el-form :inline="true" :model="searchParams">
            <el-form-item label="客户名称:">
                <el-input v-model="searchParams.name" placeholder="请输入客户名称"></el-input>
            </el-form-item>
            <el-form-item label="角色:">
                <el-select
                        v-model="searchParams.role"
                        placeholder="请输入角色名称"
                        filterable
                >
                    <el-option label="全部" :value="0"></el-option>
                    <el-option v-for="(item,index) in roleList" :key="index" :label="item" :value="index + 1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
                <el-button @click="onClear">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>

            <el-table-column align="center" prop="name" label="CMS后台">
                <el-table-column align="center" prop="cmsId" label="id"></el-table-column>
                <el-table-column align="center" prop="role" label="角色">
                    <template slot-scope="scope">{{roleList[scope.row.role + 1]}}</template>
                </el-table-column>
                <el-table-column align="center" prop="cmsName" label="客户名称"></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="金蝶系统">
                <el-table-column align="center" prop="kingdeeId" label="客户id"></el-table-column>
                <el-table-column align="center" prop="kingdeeName" label="客户名称"></el-table-column>
            </el-table-column>

            <el-table-column align="center" prop="createTime" label="操作时间">
                <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
            </el-table-column>
            <!--<el-table-column align="center" prop="name" label="操作人"></el-table-column>
            <el-table-column align="center" prop="name" label="推送状态"></el-table-column>
            <el-table-column align="center" prop="name" label="操作">
                <template slot-scope="scope">
                    <a href="javascript:">推送</a>
                </template>
            </el-table-column>-->
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'
    import utils from "@/common/utils.js";

    export default {
        name: 'customerMapping',
        title:'辅助帐客户映射',
        data() {
            return {
                roleList: [
                    '网络推客|经纪人|购房者',
                    '经纪公司',
                    '开发商',
                    '公司员工',
                ],
                searchParams: {
                    name: '',
                    role: 0,
                },
                tableConfig: {
                    pageSize: 10,
                    pageNum: 1,
                    totalSize: 10
                },
                tableData: []
            }
        },
        created() {
            this.getTableList()
        },
        activated(){
            this.onSearch()
        },
        methods: {
            onSearch() {
                this.tableConfig.pageNum = 1;
                this.getTableList()
            },
            onClear() {
                this.searchParams = {
                    role: 0,
                    name: '',
                }
            },
            getTableList() {
                this.axios.post(api.kingdeeMapperSupplierPageList, {
                    role: this.searchParams.role,
                    name: this.searchParams.name,
                    pageNum: this.tableConfig.pageNum,
                    pageSize: this.tableConfig.pageSize,
                }).then((res) => {
                    this.tableData = res.data.data.list
                    this.tableConfig.totalSize = res.data.data.total
                })
            },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getTableList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getTableList()
            },
        },
        filters: {
            formatTime(time) {
                return utils.getTimeString(time)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>
